<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Typewriter from 'typewriter-effect/dist/core';
import menuTop2 from '@/assets/images/background/menu-top2.webp';
import menuTop3 from '@/assets/images/background/menu-top3.webp';
import menuTop4 from '@/assets/images/background/menu-top4.webp';
import menuTop5 from '@/assets/images/background/menu-top5.webp';
import menuTop6 from '@/assets/images/background/menu-top6.webp';
import menuTop7 from '@/assets/images/background/menu-top7.webp';
import menuTop8 from '@/assets/images/background/menu-top8.webp';

const props = defineProps({
  title: {
    type: String,
    default: '星辰之诗✨',
    required: false
  },
  subtitles: {
    type: String,
    default: () => '你好丫~太空旅行者😄你也是穿越黑洞🪐到达这里的嘛🐰祝你好运~',
    required: false
  },
  backgroundImages: {
    type: Array<string>,
    default: () => [
      menuTop2,
      menuTop3,
      menuTop4,
      menuTop5,
      menuTop6,
      menuTop7,
      menuTop8,
    ],
    required: false
  },
  height: {
    type: String,
    default: '100vh',
    required: false
  },
  isTypeWriter: {
    type: Boolean,
    default: true,
    required: false
  }
});

const currentBgIndex = ref(Math.floor(Math.random() * props.backgroundImages.length));

// 切换背景图片
const changeBackground = () => {
  currentBgIndex.value = Math.floor(Math.random() * props.backgroundImages.length);
};

onMounted(() => {
  // 初始化打字机效果
  if(props.isTypeWriter){
    // 创建打字序列
    let sequence = new Typewriter('#typewriter', {
      loop: true,
      delay: 75,
      deleteSpeed: 50,
    });
    sequence = sequence
      .typeString(props.subtitles)
      .pauseFor(2000)
      .deleteAll(50);
    // 开始打字效果
    sequence.start();
  }

  // 每8秒切换一次背景
  setInterval(changeBackground, 8000);
});
</script>

<template>
  <div class="fullscreen-hero" :style="`height:${height}`">
    <!-- 背景图层 -->
    <div
      v-for="(bg, index) in backgroundImages"
      :key="index"
      class="hero-background"
      :class="{
        'active': currentBgIndex === index,
        'fade-out': backgroundImages.length !== 1 && index === (currentBgIndex - 1 + backgroundImages.length) % backgroundImages.length
      }"
      :style="{ backgroundImage: `url(${bg})` }"
    ></div>

    <!-- 内容区 -->
    <div class="hero-content">
      <h1 class="title">{{ title }}</h1>
      <div class="subtitle">
        <div id="typewriter"></div>
      </div>

      <!-- 向下滚动提示 -->
      <div class="scroll-hint" v-if="height === '100vh'">
        <span class="scroll-text">向下滚动</span>
        <div class="scroll-arrow"></div>
      </div>
    </div>

    <!-- 波浪动画 -->
    <div class="wave-wrapper">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
           viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(235,238,243,1)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(235,238,243,0.6)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(235,238,243,0.4)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(235,238,243,0.2)" />
        </g>
      </svg>
    </div>
  </div>
</template>

<style scoped lang="less">
.fullscreen-hero {
  position: relative;
  width: 100%;
  overflow: hidden;

  // 背景样式
  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.1);
    z-index: 0;

    &.active {
      opacity: 1;
      transform: scale(1);
    }

    &.fade-out {
      opacity: 0;
      transform: scale(1);
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
      transition: all 1.5s ease;
    }
  }

  // 内容样式
  .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    text-align: center;

    .title {
      font-size: 4rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      animation: fadeInDown 1s ease-out;
    }

    .subtitle {
      font-size: 1.5rem;
      color: #ffffff;
      max-width: 800px;
      line-height: 1.6;
      margin: 0;
      min-height: 2.4em;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

      #typewriter {
        display: inline-block;

        .Typewriter__cursor {
          color: #fff;
          animation: blink 0.8s infinite;
        }
      }
    }

    // 滚动提示
    .scroll-hint {
      position: absolute;
      bottom: 160px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: fadeInUp 1s ease-out infinite;
      z-index: 6;

      .scroll-text {
        color: #ffffff;
        font-size: 0.9rem;
        margin-bottom: 8px;
        opacity: 0.8;
      }

      .scroll-arrow {
        width: 20px;
        height: 20px;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        transform: rotate(45deg);
        opacity: 0.8;
      }
    }
  }

  // 波浪动画样式
  .wave-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .waves {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    min-height: 100px;
    max-height: 150px;
    z-index: 0;

    g.parallax {
      > use {
        animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;

        &:nth-child(1) {
          animation-delay: -2s;
          animation-duration: 7s;
        }
        &:nth-child(2) {
          animation-delay: -3s;
          animation-duration: 10s;
        }
        &:nth-child(3) {
          animation-delay: -4s;
          animation-duration: 13s;
        }
        &:nth-child(4) {
          animation-delay: -5s;
          animation-duration: 20s;
        }
      }
    }
  }
}

// 动画
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -10px);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .fullscreen-hero {
    .hero-content {
      .title {
        font-size: 3rem;
      }
      .subtitle {
        font-size: 1.2rem;
      }
    }
    .wave-wrapper {
      height: 60px;
    }
    .waves {
      height: 60px;
      min-height: 60px;
    }
    .scroll-hint {
      bottom: 80px;
    }
  }
}

@media (max-width: 576px) {
  .fullscreen-hero {
    .hero-content {
      .title {
        font-size: 2.5rem;
      }
      .subtitle {
        font-size: 1rem;
      }
    }
  }
}
</style>
